<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="24">
        <div id="line-chart">
          <EchartsCreator :options="lineChartOption"></EchartsCreator>
        </div>
      </el-col>
      <el-col :span="24">
        <div id="pie-chart">
          <EchartsCreator :options="pieChartoption"></EchartsCreator>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { lineChartOption, pieChartoption } from '../config/charts-options'
import { mapGetters } from "vuex";
export default {
  name: "DataCharts",
  data() {
    return {
      lineChart: null,
      pieChart: null,
      lineChartOption,
      pieChartoption
    };
  },
  computed: {
    ...mapGetters("waterAnalysis", ["lineChartData", "pieChartData"]),
  },
  watch: {
    // 监听折线图数据变化
    lineChartData(newVal, oldVal) {
      this.lineChartOption.xAxis.data = newVal.time;
      this.lineChartOption.series[0].data = newVal.total;
    },
    // 监听饼图数据变化
    pieChartData(newVal, oldVal) {
      this.pieChartoption.series[0].data = newVal;
    },
  },
};
</script>

<style scoped lang="less">
#line-chart,
#pie-chart {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 15px;
  width: 100%;
  height: 180px;
}
</style>